<template>
	<view class="modal-overlay" v-if="visible" @click="handleClose">
		<view class="modal-content" @click.stop>
			<!-- 渐变顶部条 -->
			<view class="modal-top-bar"></view>
			
			<!-- 弹窗标题 -->
			<view class="modal-header">
				<text class="modal-title">{{ questionTitle }}进度</text>
				<view class="info-icon">ⓘ</view>
				<view class="close-btn" @click="handleClose">✕</view>
			</view>
			
			<!-- 进度表格 -->
			<view class="progress-table">
				<!-- 表格头部 -->
				<view class="table-header">
					<view class="header-cell teacher">姓名</view>
					<view class="header-cell progress">已阅任务量/分配任务量</view>
				</view>
				
				<!-- 进度列表 -->
				<view class="progress-list">
					<view class="progress-row" v-for="teacher in teacherData" :key="teacher.name">
						<view class="progress-cell teacher">
							<view class="teacher-info">
								<view class="teacher-avatar" :style="{ backgroundColor: teacher.avatarColor }">
									<text class="avatar-text">{{ teacher.name.charAt(0) }}</text>
								</view>
								<text class="teacher-name">{{ teacher.name }}</text>
							</view>
						</view>
						<view class="progress-cell progress">
							<view class="progress-section">
								<view class="progress-bar-container">
									<view class="progress-bar">
										<view class="progress-fill" :style="{ width: teacher.progressPercent + '%' }"></view>
									</view>
								</view>
								<text class="progress-text">{{ teacher.completed }}/{{ teacher.total }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部指示器 -->
			<view class="modal-bottom-indicator"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'QuestionProgressModal',
	props: {
		// 弹窗是否显示
		visible: {
			type: Boolean,
			default: false
		},
		// 题目标题
		questionTitle: {
			type: String,
			default: '第7、9题'
		},
		// 教师进度数据
		teacherData: {
			type: Array,
			default: () => [
				{ 
					name: '胡光微', 
					completed: 200, 
					total: 400, 
					progressPercent: 50,
					avatarColor: '#FF9800'
				},
				{ 
					name: '龙梅秀', 
					completed: 200, 
					total: 400, 
					progressPercent: 50,
					avatarColor: '#9C27B0'
				},
				{ 
					name: '谭汉清', 
					completed: 430, 
					total: '自取', 
					progressPercent: 0,
					avatarColor: '#607D8B'
				},
				{ 
					name: '李岳中', 
					completed: 200, 
					total: 400, 
					progressPercent: 50,
					avatarColor: '#3F51B5'
				},
				{ 
					name: '迪力热巴', 
					completed: 200, 
					total: 400, 
					progressPercent: 50,
					avatarColor: '#009688'
				}
			]
		}
	},
	methods: {
		handleClose() {
			this.$emit('close');
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #F0F0F0;

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;

	.modal-content {
		width: 100%;
		background: @white;
		border-radius: 24rpx 24rpx 0 0;
		padding: 0;
		position: relative;
		animation: slideUp 0.3s ease-out;
		max-height: 80vh;
		overflow: hidden;

		.modal-top-bar {
			height: 8rpx;
			background: linear-gradient(90deg, @primary-color 0%, @secondary-color 100%);
			border-radius: 24rpx 24rpx 0 0;
		}

		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 30rpx 20rpx;
			position: relative;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: @text-color;
				flex: 1;
			}

			.info-icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #e0e0e0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18rpx;
				color: @text-light;
				margin-right: 20rpx;
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: @text-lighter;
				font-size: 32rpx;
			}
		}

		.progress-table {
			padding: 0 30rpx;
			max-height: 60vh;
			overflow-y: auto;

			.table-header {
				display: flex;
				align-items: center;
				padding: 16rpx 0;
				border-bottom: 1rpx solid @border-color;
				margin-bottom: 12rpx;
				background: @white;
				position: sticky;
				top: 0;
				z-index: 10;

				.header-cell {
					font-size: 24rpx;
					color: @text-light;
					font-weight: 500;

					&.teacher {
						flex: 1;
						text-align: left;
					}

					&.progress {
						flex: 2;
						text-align: right;
					}
				}
			}

			.progress-list {
				.progress-row {
					display: flex;
					align-items: center;
					padding: 24rpx 0;
					border-bottom: 1rpx solid #f8f8f8;

					&:last-child {
						border-bottom: none;
					}

					.progress-cell {
						display: flex;
						align-items: center;

						&.teacher {
							flex: 1;

							.teacher-info {
								display: flex;
								align-items: center;
								gap: 20rpx;

								.teacher-avatar {
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
									display: flex;
									align-items: center;
									justify-content: center;

									.avatar-text {
										color: @white;
										font-size: 24rpx;
										font-weight: bold;
									}
								}

								.teacher-name {
									color: @text-color;
									font-size: 28rpx;
									font-weight: 500;
								}
							}
						}

						&.progress {
							flex: 2;
							justify-content: flex-end;

							.progress-section {
								display: flex;
								align-items: center;
								gap: 20rpx;
								width: 100%;
								justify-content: flex-end;

								.progress-bar-container {
									flex: 1;
									max-width: 200rpx;

									.progress-bar {
										height: 12rpx;
										background: #F0F0F0;
										border-radius: 6rpx;
										overflow: hidden;

										.progress-fill {
											height: 100%;
											background: @primary-color;
											border-radius: 6rpx;
											transition: width 0.3s ease;
										}
									}
								}

								.progress-text {
									color: @text-color;
									font-size: 28rpx;
									font-weight: 500;
									min-width: 120rpx;
									text-align: right;
								}
							}
						}
					}
				}
			}
		}

		.modal-bottom-indicator {
			width: 200rpx;
			height: 8rpx;
			background: #e0e0e0;
			border-radius: 4rpx;
			margin: 30rpx auto 20rpx;
		}
	}
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}
</style>
